@mixin variant-colors(
  $color,
  $borderColor,
  $backgroundColor,
  $hoverColor,
  $activeColor,
  $isOutlined: false
) {
  color: $color;
  background-color: $backgroundColor;
  border: 1px solid $borderColor;

  &:hover {
    color: if($isOutlined, $borderColor, $color);
    background-color: $hoverColor;
    border-color: if($isOutlined, $borderColor, $hoverColor);
  }

  &:active {
    transform: scale(0.98);
    background-color: $activeColor;
  }

  &:focus-visible {
    outline: 1px solid $borderColor;
    outline-offset: 3px;
  }
}

@mixin button-size($width, $padding, $font) {
  width: $width;
  padding: $padding;
  font: $font;
}

.btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.content {
  display: flex;
  gap: var(--gap-xs);
  align-items: center;
}

.disabled {
  pointer-events: none;
  color: var(--greyscale-text-disabled);
  background-color: var(--greyscale-surface-disabled);
}

.filled-primary {
  @include variant-colors(
    var(--white-accent-clr),
    var(--primary-border-default),
    var(--primary-surface-default),
    var(--primary-surface-lighter),
    var(--primary-surface-darker)
  );
}

.filled-success {
  @include variant-colors(
    var(--white-accent-clr),
    var(--success-border-default),
    var(--success-surface-default),
    var(--success-surface-lighter),
    var(--success-surface-darker)
  );
}

.filled-error {
  @include variant-colors(
    var(--error-surface-default),
    var(--error-surface-default),
    var(--greyscale-surface-default),
    var(--greyscale-surface-default),
    var(--error-surface-subtle)
  );
}

.outlined-error {
  @include variant-colors(
    var(--error-surface-default),
    var(--error-surface-default),
    var(--greyscale-surface-subtle),
    var(--error-surface-subtle),
    var(--error-surface-lighter),
    true
  );
}

.outlined-primary {
  @include variant-colors(
    var(--primary-surface-default),
    var(--primary-surface-default),
    var(--greyscale-surface-default),
    var(--primary-surface-subtle),
    var(--primary-surface-lighter),
    true
  );
}

.outlined-success {
  @include variant-colors(
    var(--success-surface-default),
    var(--success-surface-default),
    var(--success-surface-subtle),
    var(--greyscale-surface-subtle),
    var(--success-surface-lighter),
    true
  );
}

.extra-small {
  @include button-size(fit-content, var(--size-base) var(--size-base), var(--font-bl-small));

  border-radius: var(--radius-xs);
}

.small {
  @include button-size(
    fit-content,
    var(--v-padding-sm) var(--h-padding-md),
    var(--font-bl-regular)
  );
}

.medium {
  @include button-size(fit-content, var(--v-padding-md) var(--h-padding-lg), var(--font-bl-medium));
}

.large {
  @include button-size(100%, var(--v-padding-lg) var(--h-padding-xl), var(--font-bl-large));
}

.circle {
  padding: var(--full-padding-xs);
  border-radius: var(--radius-full);

  span {
    font-size: 16px;
  }
}

.link {
  width: 100%;
  font: var(--font-bl-small);
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
